<script setup>
import { ref } from 'vue'
import { api } from '../../js/ajax'
import { tools } from '../../js/tools'
import { ElMessageBox, ElMessage } from 'element-plus'

const loading = ref(false)

//#region 查询的部分
const resetQuery = () => {
  page.value.pageNumber = 1
  queryInfo.value = {
    title: '',
    info: '',
    startTime: '',
    endTime: '',
    order: '1',
  }
  query()
}

const requery = () => {
  page.value.pageNumber = 1
  query()
}

const page = ref({
  pageNumber: 1,
  pageSize: 8,
})

const queryInfo = ref({
  title: '',
  info: '',
  startTime: '',
  endTime: '',
  order: '1',
})

const list = ref([])

const query = () => {
  // 开启转圈动画
  loading.value = true
  api.get('/crud/news', tools.mergeJson(queryInfo.value, page.value), data => {
    // 模拟延迟(反向优化)
    setTimeout(() => {
      loading.value
    }, 2000)
    // 查询完毕后关闭转圈动画
    loading.value = false
    if (data.success) {
      list.value = data.data.data
      page.value = data.data.pageBean
      return
    }
    ElMessageBox.alert(data.message, '新闻管理')
  })
}

query()
//#endregion

//#region 添加的部分
const avisible = ref(false)
const addInfo = ref({
  title: '',
  info: '',
  source: '',
})

const showAdd = () => {
  addInfo.value = {
    title: '',
    info: '',
    source: '',
  }
  avisible.value = true
}

const add = () => {
  api.post('/crud/news', addInfo.value, data => {
    if (data.success) {
      ElMessage.success('发布成功')
      addInfo.value = {
        title: '',
        info: '',
        source: '',
      }
      return
    }
    ElMessageBox.alert(data.message, '发布新闻')
  })
}

//#endregion

//#region 查看内容的部分
const detail = ref({
  nid: -1,
  title: '',
  info: '',
  source: '',
  hits: 0,
  lastupdate: '',
})

const dvisible = ref(false)

const showDetail = nid => {
  loading.value = true
  console.log('新闻id：', nid)
  api.get(`/crud/news/${nid}`, {}, data => {
    if (data.success) {
      loading.value = false
      detail.value = data.data
      dvisible.value = true
      return
    }
    ElMessageBox.alert(data.message, '新闻管理')
  })
}

//#endregion

//#region 删除的部分

const del = info => {
  console.log('要删除的标题：', info)
  ElMessageBox.confirm(`是否删除信息：${info.title}？`, '删除信息')
    .then(() => {
      api.delete(`/crud/news/${info.nid}`, {}, data => {
        ElMessage(data.message)
        requery()
      })
    })
    .catch(() => {})
}

//#endregion

//#region 修改的部分
const modifyInfo = ref({
  nid: 1,
  title: '',
  info: '',
  source: '',
  hits: 1,
  lastupdate: '',
})

const mvisible = ref(false)

const showModify = nid => {
  loading.value = true
  api.get(`/crud/news/${nid}`, {}, data => {
    loading.value = false
    if (data.success) {
      modifyInfo.value = data.data
      mvisible.value = true
      return
    }
    ElMessageBox.alert(data.message, '新闻管理')
  })
}

const modify = () => {
  api.put('/crud/news', modifyInfo.value, data => {
    // if (data.success) {
    //   ElMessage.success('修改成功')
    //   mvisible.value = false
    //   requery()
    //   return
    // }
    ElMessageBox.alert(data.message, '新闻管理')
  })
}
//#endregion
</script>

<template>
  <!-- 查询表单 -->
  <div style="display: flex; justify-content: flex-end">
    <el-form :inline="true">
      <el-form-item>
        <el-select v-model="queryInfo.order" style="width: 10rem">
          <el-option value="1" label="按照发布时间逆序"></el-option>
          <el-option value="2" label="按照点击量逆序"></el-option>
          <el-option value="3" label="按照发布时间正序"></el-option>
          <el-option value="4" label="按照点击量正序"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-input v-model="queryInfo.title" placeholder="标题"></el-input>
      </el-form-item>

      <el-form-item>
        <el-input v-model="queryInfo.info" placeholder="内容"></el-input>
      </el-form-item>

      <el-form-item>
        <el-date-picker
          v-model="queryInfo.startTime"
          type="date"
          placeholder="开始时间"
          value-format="YYYY-MM-DD"
        ></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-date-picker
          v-model="queryInfo.endTime"
          type="date"
          placeholder="结束时间"
          value-format="YYYY-MM-DD"
        ></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button-group>
          <el-button type="danger" @click="resetQuery">重置</el-button>
          <el-button type="primary" @click="requery">查询</el-button>
          <el-button type="success" @click="showAdd">添加</el-button>
        </el-button-group>
      </el-form-item>
    </el-form>
  </div>

  <!-- 数据呈现的部分 -->
  <div>
    <el-table v-loading="loading" :data="list" stripe border="true">
      <el-table-column label="标题" prop="title"></el-table-column>
      <el-table-column label="来源" prop="source"></el-table-column>
      <el-table-column
        width="160px"
        label="点击量"
        prop="hits"
      ></el-table-column>
      <el-table-column label="发布时间">
        <template #default="scope">
          {{ tools.formatDate(scope.row.lastupdate) }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="del(scope.row)" size="small" type="danger"
            >删除</el-button
          >
          <el-button @click="showDetail(scope.row.nid)" size="small" type="info"
            >查看内容</el-button
          >
          <el-button
            size="small"
            type="success"
            @click="showModify(scope.row.nid)"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!-- 分页的部分 -->
  <div>
    <el-pagination
      v-model:current-page="page.pageNumber"
      :page-size="page.pageSize"
      :total="page.total"
      layout="prev, pager, next,total"
      @current-change="query"
    ></el-pagination>
  </div>

  <!-- 添加的对话框 -->
  <el-dialog v-model="avisible" title="发布新闻" @closed="resetQuery">
    <div>
      <el-form>
        <el-form-item>
          <el-input v-model="addInfo.title" placeholder="标题" />
        </el-form-item>

        <el-form-item>
          <el-input v-model="addInfo.source" placeholder="新闻来源" />
        </el-form-item>

        <el-form-item>
          <el-input
            rows="10"
            type="textarea"
            v-model="addInfo.info"
            placeholder="内容"
          />
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <el-button type="danger" @click="avisible = false">关闭</el-button>
      <el-button type="primary" @click="add">发布</el-button>
    </template>
  </el-dialog>

  <!-- 查看内容的对话框 -->
  <el-dialog v-model="dvisible" :title="detail.title" fullscreen>
    <div>
      <div class="detail" v-html="detail.info"></div>
      <hr />
      <div>
        {{ tools.formatDate(detail.lastupdate) }}
        {{ detail.source }}
      </div>
    </div>
  </el-dialog>

  <!-- 修改信息的对话框 -->
  <el-dialog v-model="mvisible" title="修改新闻" @closed="query">
    <div>
      <el-form>
        <el-form-item>
          <el-input v-model="modifyInfo.title" placeholder="标题" />
        </el-form-item>

        <el-form-item>
          <el-input v-model="modifyInfo.source" placeholder="新闻来源" />
        </el-form-item>

        <el-form-item>
          <el-input
            rows="10"
            type="textarea"
            v-model="modifyInfo.info"
            placeholder="内容"
          />
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <el-button type="danger" @click="mvisible = false">关闭</el-button>
      <el-button type="primary" @click="modify">保存</el-button>
    </template>
  </el-dialog>
</template>

<style scoped>
.detail {
  /* max-height: 80vh; */
  overflow-y: auto;
}
.detail:deep img {
  display: block;
  width: 100%;
  height: auto;
}
</style>
